<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.detail {
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow: hidden;
		flex:1;
		box-sizing: border-box;
		.video{
			width: 100%;
			height: 20rem;
			box-sizing: border-box;
		}
		.info{
			display: flex;
			flex-direction: column;
			padding: 0 1.6rem 1rem 1.6rem;
			.line1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 1rem 0;
				.title{
					font-size: 1.7rem;
					color: $color1;
				}
				.badge {
					padding: 0.4rem 1rem;
					font-size: 1.2rem;
					background-color: rgba(#FF7E16, 0.2);
					color: #FF7E16;
					// border: 0.1rem solid #FF6D00;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
			}
			.line2{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: $color2;
				.text{
					font-size: 1.3rem;
					margin-left: 0.6rem;
				}
				.text2{
					font-size: 1.3rem;
					margin-left: 0.6rem;
					color: $adornColor;
				}
			}
		}
	}
	.content{
		padding: 1.4rem 1.6rem;
		
		.title2{
			font-size: 1.6rem;
			color: $color2;
			font-weight: bold;
		}
		.line{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			.label{
				color: #999;
			}
			.value{
				color: #777;
				margin-left: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line3{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			border-bottom: 1px solid #f4f4f4;
			padding-bottom: 1rem;
			.label{
				color: #999;
			}
			.title{
				font-size: 1.6rem;
				font-weight: bold;
				color: $color2;
			}
			.value{
				color: #777;
				margin-top: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line4{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			padding-bottom: 1rem;
			.title{
				font-size: 1.6rem;
				color: $color2;
				font-weight: bold;
			}
			.item{
				padding: 2.8rem 1.2rem 1.2rem 1.2rem;
				background-color: white;
				box-shadow:0 0 1px 1px #f4f4f4;
				border-radius: 0.8rem;
				margin-top: 3rem;
				position: relative;
				.image{
					position: absolute;
					left: 1.2rem;
					top: -1.7rem;
				}
				.name{
					font-size: 1.5rem;
					color: $color1;
				}
				.desc{
					margin-top: 0.8rem;
					color: $color3;
					font-size: 1.1rem;
					line-height: 1.6rem;
				}
			}
		}
	}
	.fix-bottom{
	  position: fixed;
	  bottom: 0rem;
	  left: 0;
	  right: 0;
	  z-index: 1;
	  box-sizing: border-box;
	  background: white;
	  text-align: center;
	  border-top: 1px solid #f4f4f4;
	  padding: 0.5rem 1.6rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .box{
		  flex: 0 0 3.6rem;
		  .icon{
			  
		  }
		  .text{
			  font-size: 1.3rem;
			  color: $color3;
		  }
	  }
	  .submitBtn{
		  flex: 0 0 70%;
		  background-color:$mainColor;
		  color:white;
		  margin: 0.2rem auto;
		  font-size: 1.4rem;
		  
	  }
	}
	// .jie{
	// 	padding: 1rem 0;
	// 	color:$color1 !important;
	// }
	.jie{
		padding: 1rem 1.6rem;
		display: flex;
		&.active{
			color: #FB6041;
		}
		.jieLeft{
			flex: 0 0 2rem;
		}
		.jieRight{
			flex: 1;
			.title{
				font-size: 1.5rem;
				color: $color1;
			}
			.time{
				margin-top: 0.6rem;
				font-size: 1.2rem;
				color:$color2;
			}
		}
	}
</style>
<template>
	<div class="detail" v-if="course.course">
		<!-- <img class="headerImg" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/90c7507e-49fc-4579-bb6e-f99b830c4d34.png" alt=""> -->
		<video class="video" :src="link" controls="controls" autoplay="autoplay">
			your browser does not support the video tag
		</video>
		<div class="info">
			<div class="line1">
				<span class="title">{{course.course.name}}</span>
			</div>
			<div class="line2">
				<span><van-icon name="clock-o" size="1.8rem"/></span>
				<span class="text">共{{course.course.course_duration}}节课时</span>
			</div>
			<div class="line2 margT-l">
				<span><van-icon name="friends-o" size="1.9rem"/></span>
				<span class="text">{{course.course.sign}}人在学</span>
			</div>
		</div>
		<div class="splitLine"></div>
		<div class="detail_tabs">
			<van-tabs v-model="tabActive" line-width="100" title-active-color="#335FFC" color="#335FFC" @change="onClickTabs">
			  <van-tab title="课程简介" name="0">
				  <div class="content">
					  <div class="line3">
						  <div class="title">课程信息</div>
						  <div class="value">
							  {{course.course.introduction}}
						  </div>
					  </div>
					  <div class="line4">
						  <div class="title">课程讲师</div>
						  <div class="item" v-for="(item,index) in course.teacher" :key="index">
							  <van-image
								class="image"
								round
							    width="3.4rem"
							    height="3.4rem"
							    fit="cover"
							    :src="item.avatar"
							  />
							  <div class="name">{{item.name}}</div>
							  <div class="desc">{{item.introduction}}</div>
						  </div>
					  </div>
				  </div>
			  </van-tab>
			  <van-tab title="课程目录" name="1">
				  <van-collapse v-model="activeNames">
				    <van-collapse-item v-for="(item,index) in coursesMulu" :title="`第${index+1}章 ${item.title}`" :name="index" :key="index">
						<div class="jie" :class="active==item.id?'active':''" v-for="(item,index) in item.children" :key="index" @click="changeLink(item)">{{index+1}} {{item.titles}}</div>
					</van-collapse-item>
				  </van-collapse>
			  </van-tab>
			</van-tabs>
		</div>
		<div class="tabbar-height-white"></div>
		<div class="fix-bottom">
			
			<van-button round class="submitBtn" size="normal" v-if="course.course.status==1" @click="xiajia(course.course)">下架</van-button>
			<van-button round class="submitBtn" size="normal" v-if="course.course.status==2" @click="shangjia(course.course)">重新上架</van-button>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {Dialog,Toast} from 'vant';
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		data() {
			return {
				active:0,
				tabActive:0,
				activeNames: [],
				course:'',
				coursesMulu:'',
				link:'',
				userInfo:''
			}
		},
		created() {
			const _this = this;
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
			// this.getCode()
		},
		mounted() {
			const id = this.$route.query.id
			const type = this.$route.query.type
			this.CoursesDetail(id,type)
		},
		methods: {
			shangjia(item) {
				const _this = this
				const masterColor = _this.$store.state.masterColor
				console.log("_this.$store.state.masterColor",_this.$store.state.masterColor)
				Dialog.confirm({
				  title: '重新上架',
				  message: '是否确定重新上架本课程？',
				  confirmButtonColor: masterColor
				}).then(() => {
					// on confirm
					this.shangxiajia(item)
				  }).catch(() => {
					// on cancel
				  });
			},
			xiajia(item) {
				const _this = this
				const masterColor = _this.$store.state.masterColor
				console.log("_this.$store.state.masterColor",_this.$store.state.masterColor)
				Dialog.confirm({
				  title: '下架确认',
				  message: '是否确定下架本课程？',
				  confirmButtonColor: masterColor
				}).then(() => {
					// on confirm
					this.shangxiajia(item)
				  }).catch(() => {
					// on cancel
				  });
			},
			shangxiajia(item) {
				
				let params = {
					id: item.id,
					status: item.status,
					campus: this.userInfo.campus_id
				}
				this.$request.CoursesSaves(params).then(res=>{
					// Dialog({ message: '提示' });
					console.log("CoursesSaves",res)
					if(res.ret==200){
						// this.courseData = res.data.data
						Toast.success('操作成功');
						this.course.course.status = this.course.course.status==1?2:1
					}
					// else{
					// 	Dialog({ title:'系统提示', message: res.msg });
					// }
				})
			},
			changeLink(item) {
				this.link = item.link
				this.active = item.id
			},
			CoursesDetail(course_id,type) {
				const _this = this;
				console.log('-----------------', this.$route.query)
				let params = {
					id:this.$route.query.course_id,
					type:type,
					campus: JSON.parse(localStorage.getItem('userInfo')).campus_id
				}
				_this.$request.CoursesDetail(params).then(res => {
					if(res.ret==200){
						this.course = res.data
						this.link = res.data.link
					}
					// this.$store.commit('setCaseList', this.caseList);
				})
			},
			addInStudyku() {
				this.$toast("添加成功")
			},
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					
				} else if (index == 1) {
					//线上课程
					this.CoursesItem()
				}
			},
			CoursesItem() {
				const _this = this;
				let params = {
					id: this.course.course.id
				}
				console.log("CoursesItem",params)
				_this.$request.CoursesItem(params).then(res => {
					_this.coursesMulu = res.data
				})
			},
		}
	};
</script>
